<template>
	<view>
		<view class="flex flex-row flex-row-center-start">
			<TmIcon
				@click="expandHandler(_item[props.fieldNames.id])"
				v-if="_item['children']"
				:font-size="26"
				:name="_checked ? expandedIconOpenIcon : expandedIconCloseIcon"
			></TmIcon>
			<slot></slot>
		</view>
		<view v-if="_item['children'] && _checked">
			<base-node-vue
				@text-click="emits('textClick', $event)"
				:followTheme="props.followTheme"
				:fieldNames="props.fieldNames"
				:data="_item['children']"
			></base-node-vue>
		</view>
	</view>
</template>
<script lang="ts" setup>
import { inject, computed, getCurrentInstance, ref, toRefs, toRaw, Ref, watch, watchEffect } from 'vue'
import TmIcon from '../tm-icon/tm-icon.vue'
import baseNodeVue from './base-node.vue'

import { baseNodeData } from './interface'
const emits = defineEmits(['textClick'])

const { proxy } = getCurrentInstance()
const props = defineProps({
	followTheme: {
		type: [Boolean, String],
		default: true
	},
	data: {
		type: Object,
		default: () => {},
		required: true
	},
	/**
	 * 数据结构字段的映射表。
	 */
	fieldNames: {
		type: Object,
		default: () => {
			return {
				id: 'id',
				text: 'text'
			}
		}
	}
})
//父级方法。
let parent = proxy.$parent

while (parent) {
	if (parent?.TreeParaentName == 'tmTree' || !parent) {
		break
	} else {
		parent = parent?.$parent ?? undefined
	}
}
const TreePareantSelectedExpandedId = inject('TreePareantSelectedExpandedId', ref([]))
const expandedIconOpenIcon = parent?.$props.expandedIconOpen ?? 'tmicon-sort-down'
const expandedIconCloseIcon = parent?.$props.expandedIconClose ?? 'tmicon-caret-right'
const _item = computed(() => <baseNodeData>props.data)
const _checked: Ref<string | number> = ref('')
function expandHandler() {
	_checked.value = _checked.value ? '' : _item.value[props.fieldNames.id]
	if (_checked.value) {
		parent?.onExpand({ data: toRaw(_item.value), expand: true })
	} else {
		parent?.onUnExpand({ data: toRaw(_item.value), expand: false })
	}
}
function isCheckedOpen(): void {
	let sAr = TreePareantSelectedExpandedId.value.filter((el: string | number) => el == _item.value[props.fieldNames.id])
	_checked.value = sAr[0] ?? ''
}
watchEffect(() => isCheckedOpen())

function setStatus() {
	expandHandler(_item.value[props.fieldNames.id])
}

defineExpose({ setStatus, filedId: _item.value[props.fieldNames.id] })
</script>
